<template>
    <div>
        <Tabcomponent></Tabcomponent>
        <div class="placean">
            <div>配送</div>
            <div>收获地址</div>
            <div>
                <!--地址-->
                <div v-for="(item,index) in 4" :key="index" @click="site(index)">
                    <div ><span v-if="siteI==index"></span></div>
                    <div>阿娇 15464641478 重庆市-直辖区-江北区 华新街道北滨一路 茂业天地10-21</div>
                    <div v-if="siteI==index">默认地址</div>
                </div>
            </div>
            <div>
                <span>+</span><span>新增收货地址</span>
            </div>
            <!--支付方式-->
            <div>
                <div>支付方式</div>
                <div>
                    <div>
                        <span :class="paymentI==1?'iconfont icon-gou1': 'iconfont icon-gou1 iconcolor'" @click="paymentindex(1)"></span>
                        <img src="../assets/img/支付宝.png" alt="">
                        <span>支付宝支付</span>
                    </div>
                    <div>
                        <span :class="paymentI==2?'iconfont icon-gou1':'iconfont icon-gou1 iconcolor'" @click="paymentindex(2)"></span>
                        <img src="../assets/img/微信(1).png" alt="">
                        <span>微信支付</span>
                    </div>
                    <div>
                        <span :class="paymentI==3?'iconfont icon-gou1':'iconfont icon-gou1 iconcolor'" @click="paymentindex(3)"></span>
                       <img src="../assets/img/银行卡.png" alt="">
                        <span>支付宝支付</span>
                    </div>
                </div>
            </div>
            <!--优惠码-->
            <div class="promocode">
                <div>优惠码</div>
                <div>每个优惠码仅限单词使用</div>
                <div>
                    <input type="text">
                    <button>确认使用</button>
                </div>
            </div>
            <!--积分-->
            <div class="promocode">
                <div>积分</div>
                <div>默认显示所有的积分可兑换的金额</div>
                <div>
                    <input type="text" placeholder="请输入您要兑换的积分">
                    <button>确认使用</button>
                </div>
            </div>
            <!--积分信息-->
            <div class="paymentinfor">
                <p>商品总金额：￥200.40</p>
                <p>优惠：-￥0.00</p>
                <p>积分抵现：-￥0.00</p>
                <p>运费：￥6.00</p>
                <p>税费：￥200.40</p>
                <p>商品总金额：￥6.00</p>
                <p>实付金额：<span>￥26.40</span></p>
                <p>送至: 阿乔 18200141692 重庆市-市辖区-江北区 华新街街道北滨一路 茂业天地21楼-12</p>
            </div>
            <button class="but" @click="toplaceorder">提交</button>
        </div>
         <!--商品相关信息-->
        <div class="goods">
            <ul>
                <li style="font-weight: 800; margin-bottom: 6px;">安心下单</li>
                <li>· 满额享定额运费</li>
                <li>· 100%正品直邮 </li>
                <li>· 14天无理由免费退货</li>
                <li>关税- -并退还</li>
                <div>了解详情</div>
            </ul>
            <ul>
                <li style="font-weight: 800; margin-bottom: 6px;">清关无忧</li>
                <li>· 我们护驾</li>
                <li>· 清关无忧 </li>
                <li>· 为确保您的商品能顺利清关，请在下单后的订单确认页面上传您的身份信息。</li>
                <div>了解详情</div>
            </ul>
            <ul>
                <li style="font-weight: 800; margin-bottom: 6px;">品牌故事</li>
                <li>·maxsoo旗下品牌</li>
                <li>:CHOCOOLATE 是 2006 年创立的年轻品牌，以“mass”与“prestige”的结合为核心理念，坚持将简约而精致的生活追求融入到服饰设计中，打造出玩味有趣的“masstige”独特风格，开启时尚新可能。 </li>
            </ul>
            <ul>
                <li style="font-weight: 800; margin-bottom: 6px;">贴心专送</li>
                <li>所有商品免配送费，并受我们的退货政策所保护。由顺丰提供标准配送服务，即发货日起 3 至 5 个工作日内送达，法定节假日除外。</li>
            </ul>
        </div>
    </div>
</template>

<script>
import Tabcomponent from '@/components/Tabcomponent.vue'
export default {
    components: {
        Tabcomponent
    },
    data() {
        return {
            siteI : null,
            paymentI: null
        }
    },
    methods: {
        site(i) {
            this.siteI = i
        },
        paymentindex(i) {
            this.paymentI = i
        },
        toplaceorder() {//提交订单
            this.$router.push({
                path: '/placeorder'
            })
        }
    },
}
</script>

<style lang='scss'>
.placean {
    width: 1003px;
    padding-top: 215px;
    >div:nth-child(1) {
        font-size: 28px;
    }
    >div:nth-child(2) {
        font-size: 16px;
        margin-top: 18px;
        margin-bottom: 12px;
    }
    >div:nth-child(3) {
        border: 1px solid #000;
        border-bottom: none;
        >div {
            overflow: hidden;
            border-bottom: 1px solid #000;
            >div {
                float: left;
            }
            >div:nth-child(1) {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                border: 2px solid #000;
                position: relative;
                margin-left: 14px;
                margin-top: 8px;
                cursor: pointer;
                span {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background: #000;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin: -6px 0 0 -6px;
                }
            }
            >div:nth-child(2) {
                font-size: 16px;
                line-height: 40px;
                margin-left: 14px;
            }
            >div:nth-child(3) {
                font-size: 16px;
                line-height: 40px;
                float: right;
                margin-right: 16px;
            }
        }
    }
    >div:nth-child(4) {
        margin-top: 21px;
        padding-bottom: 50px;
        border-bottom: 1px solid #000;
        >span:nth-child(1) {
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 1px solid #000;
            border-radius: 50%;
            font-size: 12px;
            line-height: 10px;
            text-align: center;
        }
        >span {
            font-size: 16px;
            margin-left: 4px;
        }
    }
    >div:nth-child(5) {
        margin-top: 60px;
        padding-bottom: 60px;
        border-bottom: 1px solid #000;
        >div:nth-child(1) {
            font-size: 28px;
        }
        >div:nth-child(2){
            >div {
                position: relative;
                margin-top: 57px;
                >span:nth-child(1) {
                    font-size: 28px;
                    cursor: pointer;
                }
                >img {
                    width: 35px;
                    height: 35px;
                    vertical-align: top;
                    margin-left: 12px;
                }
                >span:nth-child(3) {
                    font-size: 18px;
                    line-height: 35px;
                    position: absolute;
                    top: 2px;
                    left: 90px;
                }
            }
        }
    }
    .promocode {
        padding-top: 30px;
        >div:nth-child(1) {
            font-size: 16px;
            color: #000;
        }
        >div:nth-child(2) {
            font-size: 16px;
            color: #666;
            margin-top: 12px;
        }
        >div:nth-child(3) {
            margin-top: 25px;
            position: relative;
            >input {
                width: 328px;
                height: 26px;
                font-size: 16px;
                padding: 8px;
                border: 1px solid #000;
                outline: none;
            }
            >input::placeholder {
                color: #b5b5b5;
            }
            >button {
                width: 272px;
                height: 44px;
                font-size: 14px;
                background: #fff;
                border: 1px solid #000;
                position: absolute;
                left: 380px;
                cursor: pointer;
            }
        }
    }
    .paymentinfor {
        margin-top: 70px;
        >p {
            font-size: 14px;
            line-height: 30px;
            >span {
                color: #E93233;
            }
        }
    }
    .but {
        width: 239px;
        height: 50px;
        background: #000;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        outline: none;
        margin-top: 30px;
    }
}
.goods {
    width: 1209px;
    background: #ddd;
    height: 294px;
    margin-top: 82px;
    margin-bottom: 87px;
    padding-left: 81px;
    overflow: hidden;
    >ul {
        padding-top: 40px;
        width: 220px;
        float: left;
        margin-right: 50px;
        >li {
            font-size: 14px;
            line-height: 24px;
        }
        >div {
            display: inline-block;
            font-size: 14px;
            margin-top: 30px;
            cursor: pointer;
        }
    }
}
.iconcolor {
    color: #EDEDED;
}
</style>